<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link href="https://openlayers.org/en/v4.0.1/css/ol.css" rel="stylesheet"/>
      <link href="css/main.css" rel="stylesheet"/>
      <title>OL3-地图网格</title>
  </head>
  <body>
      <div id="map"></div>

      <script src="scripts/libs/ol.js"></script>
      <script type="text/javascript">
          var osmLayer = new ol.layer.Tile({
              source: new ol.source.OSM()
          });
          var map = new ol.Map({
              target: 'map',
              layers: [osmLayer],
              view: new ol.View({
                  center: ol.proj.transform([116, 40],"EPSG:4326", "EPSG:3857"),
                  zoom: 9
              })
          });
          var graticuleLayer = new ol.Graticule({
  //            map: map,
              strokeStyle: new ol.style.Stroke({
                  color: 'rgba(12, 12, 12, 0.8)',
                  width: 0.6
              }),
              targetSize: 100
          });
          graticuleLayer.setMap(map);
      </script>
  </body>
</html>
